<template>
    <div :class="`loadingBox full fix inset flex justify-center align-center bg-blur-xs ${visable?'show':''}`">
        <div class="loader">
            <div class="loader-inner ball-spin-fade-loader">
              <div class="five"></div>
              <div class="two"></div>
              <div class="three"></div>
              <div class="four"></div>
              <div class="five"></div>
              <div class="two"></div>
              <div class="three"></div>
              <div class="four"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';
const visable = computed(() => useStore().state.loading);
</script>
<style lang="scss" scoped>
.loadingBox{
    z-index: -99999;
    opacity: 0;
    outline: 0;
    text-align: center;
    -ms-transform: scale(5.185);
    transform: scale(5.185);
    backface-visibility: hidden;
    perspective: 2000px;
    transition: all .5s ease-in-out 0s;
    pointer-events: none;
    &.show{
        z-index: 99999;
        opacity: 1;
        transition-duration: 0.3s;
        -ms-transform: scale(1);
        transform: scale(1);
        overflow-x: hidden;
        overflow-y: auto;
        pointer-events: auto;
    }
}
</style>